<template>
  <view v-if="visible" class="toast-container">
	 <view class="container">
    <view class="toast">{{ message }}</view>
	<view class="toast-text">已选择： {{name}} {{phone}}</view>
	<view class="modal-footer">
			  <span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">确定</span>
	</view>
  </view>
  </view>
</template>

<script>
		import {addBill} from '@/api/bill.js';
export default {
  data() {
    return {
      visible: false,
      message: '',
	  ids:[],
	  req:{},
    };
  },
  props: {
	  businessId: {
	     type: Number,
	     required: true
	  },
  	 name: {
  		 type: String,
  		 required: true
  	 },
	 phone: {
		 type: String,
		 required: true
	 }
      },
  methods: {
	show(msg) {
	  this.message = msg;
	  this.visible = true;
	},
	addCilck(){
		console.log(this.businessId);
		this.req.contactInformation=this.phone;
		this.req.businessId=this.businessId;
		 addBill(this.req).then(res =>{
		 	this.visible = false;
			this.$emit('add-item', 1);
		 uni.showToast({
		 	        title: '分单成功',
		 	        icon: 'success',
		 	    });
		 }).catch((error) => {
		     // 请求失败
		     console.error('分单失败', error);
		     uni.showToast({
		         title: '分单失败，请重试',
		         icon: 'none',
		     });
		 });
		this.visible = false;
	},
	closeShow(){
		this.visible = false;
	}
  }
};
</script>

<style scoped>
.toast-container {
position: fixed;
	top: 0%;
	left: 0%;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  
}
.container{
	position: fixed;
	top: 40%;
	left: 50%;
	width: 300px;
	height: 120px;
	transform: translate(-50%, -50%);
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: black;
	text-align: center;
	border-radius: 5px;
	padding: 10px 20px;
}

.toast {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: 20px;
}
.toast-text{
	font-size: 14px;
	color: #9d9d9d;
	position: relative;
	top: 30px;
}
.modal-footer {
  display: flex;
  justify-content: space-around;
  position: relative;
  top: 40px;
  border-top: 1px solid #ccc;
}
.yuyue{
	color: #ffaa00;
	font-weight: bold;
	border-left: 1px solid #ccc;
	display: inline-block;
	height: 48px;
	line-height: 40px;
	width: 150px;
	font-size: 15px;
	position: relative;
	left: 30px;
}
.quxiao{
	text-align: center;
	margin-top: 10px;
	margin-left: 30px;
	font-size: 15px;
}
</style>